// ----------------------------------------------------------------------------
// markItUp!
// ----------------------------------------------------------------------------
// Copyright (C) 2008 Jay Salvat
// http://markitup.jaysalvat.com/
// ----------------------------------------------------------------------------
// Html tags
// http://en.wikipedia.org/wiki/html
// ----------------------------------------------------------------------------
// Basic set. Feel free to add more tags
// ----------------------------------------------------------------------------

var InlineUpload = 
{
	dialog: null,
	offset: {},
	reader: null,
	is_pic: false,
	display: function(is_pic) {
		if (this.dialog)
			this.cleanUp();

		this.is_pic = is_pic;
		this.reader = new FileReader();
		this.reader.onload = function (oFREvent) {
			if (InlineUpload.is_pic)
				$.markItUp( {replaceWith:'<img src="' + oFREvent.target.result + '" />' });
			else
				$.markItUp( {replaceWith:'<a href="' + oFREvent.target.result + '" >Download file name here...</a>' });
		};

		this.offset = $('.markItUpHeader').offset();
		this.dialog = $('\
			<div class="markItUpInlineUpload">file will be insert direct to current page (encoded by base64), only small file is allowed (max 1M).\
			<form>\
			<input id="inline_upload_file" type="file" />\
			<input id="inline_upload_submit" type="button" value="insert" /></form>\
			<div id="inline_upload_close"></div></div>\
		').appendTo(document.body).hide().css('top', this.offset.top).css('left', 200);

		//init submit button
		$('#inline_upload_submit').click(function()
		{
			if (document.getElementById("inline_upload_file").files.length === 0) { return; }
			var oFile = document.getElementById("inline_upload_file").files[0];
			InlineUpload.reader.readAsDataURL(oFile);

			InlineUpload.cleanUp();
		});

		// init cancel button
		$('#inline_upload_close').click(this.cleanUp);

		this.dialog.fadeIn('slow');
	},

	cleanUp: function()
	{
		InlineUpload.dialog.fadeOut().remove();
		InlineUpload.dialog = null;
	}
};

var ColorPicker = 
{
	dialog: null,
	offset: {},
	display: function() {
		if (this.dialog)
			this.cleanUp();

		this.offset = $('.markItUpHeader').offset();
		this.dialog = $('\
			<div class="markItUpColorPicker">\
			<form><div class="form-item"><label for="color">Color:</label>\
			<input type="text" id="color_val" name="color" value="#123456" /></div>\
			<div id="color_picker"></div>\
			<input id="color_picker_submit" type="button" value="insert" /></form>\
			<div id="color_picker_close"></div></div>\
		').appendTo(document.body).hide().css('top', this.offset.top).css('left', 100);

		$('#color_picker').farbtastic('#color_val');

		//init submit button
		$('#color_picker_submit').click(function()
		{
			$.markItUp( {openWith:'<span style="color:' + $('#color_val').val() + '">', closeWith:'</span>'});
			ColorPicker.cleanUp();
		});

		// init cancel button
		$('#color_picker_close').click(this.cleanUp);

		this.dialog.fadeIn('slow');
	},

	cleanUp: function()
	{
		ColorPicker.dialog.fadeOut().remove();
		ColorPicker.dialog = null;
	}
};

function encodeSpecial(markItUp) {
	var container = document.createElement('div');
	container.appendChild(document.createTextNode(markItUp.selection));
	return container.innerHTML; 
}

mySettings = {
	onShiftEnter:	{keepDefault:false, replaceWith:'<br />\n'},
	onCtrlEnter:	{keepDefault:false, openWith:'\n<p>', closeWith:'</p>\n'},
	onTab:			{keepDefault:false, openWith:'	 '},
	markupSet: [
		{name:'Heading 1', key:'1', openWith:'<h1(!( class="[![Class]!]")!)>', closeWith:'</h1>', placeHolder:'Your title here...' },
		{name:'Heading 2', key:'2', openWith:'<h2(!( class="[![Class]!]")!)>', closeWith:'</h2>', placeHolder:'Your title here...' },
		{name:'Heading 3', key:'3', openWith:'<h3(!( class="[![Class]!]")!)>', closeWith:'</h3>', placeHolder:'Your title here...' },
		{name:'Heading 4', key:'4', openWith:'<h4(!( class="[![Class]!]")!)>', closeWith:'</h4>', placeHolder:'Your title here...' },
		{name:'Heading 5', key:'5', openWith:'<h5(!( class="[![Class]!]")!)>', closeWith:'</h5>', placeHolder:'Your title here...' },
		{name:'Heading 6', key:'6', openWith:'<h6(!( class="[![Class]!]")!)>', closeWith:'</h6>', placeHolder:'Your title here...' },
		{name:'Paragraph', openWith:'<p(!( class="[![Class]!]")!)>', closeWith:'</p>' },
		{separator:'---------------' },
		{name:'Bold', key:'B', openWith:'(!(<strong>|!|<b>)!)', closeWith:'(!(</strong>|!|</b>)!)' },
		{name:'Italic', key:'I', openWith:'(!(<em>|!|<i>)!)', closeWith:'(!(</em>|!|</i>)!)' },
		{name:'Stroke through', key:'S', openWith:'<del>', closeWith:'</del>' },
		{name:'Colors', beforeInsert: function() { ColorPicker.display(true) }},
		{separator:'---------------' },
		{name:'Ul', openWith:'<ul>\n', closeWith:'</ul>\n' },
		{name:'Ol', openWith:'<ol>\n', closeWith:'</ol>\n' },
		{name:'Li', openWith:'<li>', closeWith:'</li>' },
		{name:'Table generator', placeholder:"Your text here...",
		replaceWith:function(markItUp) {
			var cols = prompt("How many cols?"),
				rows = prompt("How many rows?"),
				html = "<table>\n";
			if (markItUp.altKey) {
				html += " <tr>\n";
				for (var c = 0; c < cols; c++) {
					html += "! [![TH"+(c+1)+" text:]!]\n";	
				}
				html+= " </tr>\n";
			}
			for (var r = 0; r < rows; r++) {
				html+= " <tr>\n";
				for (var c = 0; c < cols; c++) {
					html += "  <td>"+(markItUp.placeholder||"")+"</td>\n";	
				}
				html+= " </tr>\n";
			}
			html += "<table>\n";
			return html;
		}},
		{separator:'---------------' },
		{name:'Picture', key:'P', replaceWith:'<img src="[![Source:!:http://]!]" alt="[![Alternative text]!]" />' },
		{name:'Link', key:'L', openWith:'<a href="[![Link:!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'Your text to link...' },
		{name:'Insert Picture', className:"pic_add", beforeInsert: function(markItUp) { InlineUpload.display(true) }},
		{name:'Insert File', className:"file_add", beforeInsert: function(markItUp) { InlineUpload.display(false) }},
		{separator:'---------------' },
		{name:'Codes', className:"codes", dropMenu:[
			{name: 'bash shell', openWith:'<pre class="brush: bash;">\n', closeWith:'\n</pre>\n', replaceWith:encodeSpecial},
			{name: 'cpp c', openWith:'<pre class="brush: c;">\n', closeWith:'\n</pre>\n', replaceWith:encodeSpecial},
			{name: 'css', openWith:'<pre class="brush: css;">\n', closeWith:'\n</pre>\n', replaceWith:encodeSpecial},
			{name: 'diff', openWith:'<pre class="brush: diff;">\n', closeWith:'\n</pre>\n', replaceWith:encodeSpecial},
			{name: 'java', openWith:'<pre class="brush: java;">\n', closeWith:'\n</pre>\n', replaceWith:encodeSpecial},
			{name: 'javascript', openWith:'<pre class="brush: js;">\n', closeWith:'\n</pre>\n', replaceWith:encodeSpecial},
			{name: 'perl', openWith:'<pre class="brush: perl;">\n', closeWith:'\n</pre>\n', replaceWith:encodeSpecial},
			{name: 'text plain', openWith:'<pre class="brush: plain;">\n', closeWith:'\n</pre>\n', replaceWith:encodeSpecial},
			{name: 'python', openWith:'<pre class="brush: py;">\n', closeWith:'\n</pre>\n', replaceWith:encodeSpecial},
			{name: 'ruby', openWith:'<pre class="brush: ruby;">\n', closeWith:'\n</pre>\n', replaceWith:encodeSpecial},
			{name: 'sql', openWith:'<pre class="brush: sql;">\n', closeWith:'\n</pre>\n', replaceWith:encodeSpecial},
			{name: 'xml html', openWith:'<pre class="brush: xml;">\n', closeWith:'\n</pre>\n', replaceWith:encodeSpecial}
		]},
		{name:'Encode Html special chars', className:"encodechars", replaceWith:encodeSpecial},
		{name:'Clean', className:'clean', replaceWith:function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } },
		{name:'Preview', className:'preview', call:'preview' }
	]
}
